<template>
    <div class="policeSituationBox">

        <div class="d-flex justify-content-end" style="height:24px;">
            <!--TODO-->
            <!--<div class="border-light-theme px-6 mr-14 cursor-pointer">查看历史</div>-->

        </div>
        <div class="d-flex">
            <div class="d-flex mr-14">
                <div class="mr-14 text-center">

                    <div class="position-relative">
                        <div id="todyPoliceStatusPieAllJingQingBox"></div>
                        <div class="absoluteFull flexCenterCenter">
                            <div class="text-center flexCenterCenter"
                                 style="width:111px;height:111px;border-radius: 100%; border:2px solid #f69037">
                                <div class="line-height-1">
                                    <div class="text-size-36 font-weight-bold digitalFont text-f69037">
                                        {{dataTodyPoliceStatus.policeSituationNum}}
                                    </div>
                                    <div>总警情</div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="d-inline-block border-light-theme px-6 mt-10">
                        <span>未处理</span>
                        <span class="text-f69037 text-size-16 ml-6 font-weight-bold">{{dataTodyPoliceStatus.todoPoliceSituationNum}}</span>
                    </div>
                </div>
                <div class="text-center">

                    <div class="position-relative">
                        <div id="todyPoliceStatusPieAllYuJingBox"></div>
                        <div class="absoluteFull flexCenterCenter">
                            <div class="text-center flexCenterCenter"
                                 style="width:111px;height:111px;border-radius: 100%; border:2px solid #fab96d">
                                <div class="line-height-1">
                                    <div class="text-size-36 font-weight-bold digitalFont text-fab96d">
                                        {{dataTodyPoliceStatus.warningNum}}
                                    </div>
                                    <div>总预警</div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="d-inline-block border-light-theme px-6 mt-10">
                        <span>未处理</span>
                        <span class="text-fab96d text-size-16 ml-6 font-weight-bold">{{dataTodyPoliceStatus.todoWarningNum}}</span>
                    </div>
                </div>

            </div>
            <div class="gradientLine2px" style="height: 150px"></div>
            <div class="d-flex flex-column align-items-center justify-content-center" style="width:170px">
                <div class="text-size-36 digitalFont text-39fef8 ">{{dataTodyPoliceStatus.trafficControlNum}}</div>
                <div class="flexCenterCenter mb-16">
                    <img src="../../assets/img/emergencyDuty/iconTrafficControl.png" class="img-fluid mr-10">
                    <div>交通管制</div>
                </div>
            </div>
        </div>

        <div class="text-right pr-14 text-00deff">
            <span class="mr-14">上次更新时间</span><span>{{dataTodyPoliceStatus.lastUpdateTime}}</span>
        </div>
    </div>

</template>

<script>
    import {getTodyPoliceStatus} from "../../common/api";
    import {echartsSimpePieFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import {clearIntervalArray} from "../../utils/js-utils";
    import * as moment from "moment";

    export default {
        name: "policeSituation",
        data(){
            return{
                dataTodyPoliceStatus: {},//今日警情
                echartsTodyPoliceStatusPieAllJingQingChart : null,
                echartsTodyPoliceStatusPieAllYuJingChart : null,


                intervalArray:[],

            }
        },methods:{
            getTodyPoliceStatus() {
                //todo 发版修改
                var reqBody={
                    // currentTime:'2020-11-24'
                    // currentTime:'2020-11-26'
                    currentTime:moment().format("YYYY-MM-DD")
                };
                getTodyPoliceStatus(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.dataTodyPoliceStatus = res.data;
                        this.biuldTodyPoliceStatusPieAllJingQingChart()
                        this.biuldTodyPoliceStatusPieAllYuJingChart()
                    }
                })
            },

            //两个饼状图
            biuldTodyPoliceStatusPieAllJingQingChart() {
                this.echartsTodyPoliceStatusPieAllJingQingChart = echarts.init(document.getElementById('todyPoliceStatusPieAllJingQingBox'));
                this.echartsTodyPoliceStatusPieAllJingQingChart.setOption(echartsSimpePieFactory('#F1753A', this.dataTodyPoliceStatus.policeSituationNum - this.dataTodyPoliceStatus.todoPoliceSituationNum));
            },

            biuldTodyPoliceStatusPieAllYuJingChart() {
                this.echartsTodyPoliceStatusPieAllYuJingChart = echarts.init(document.getElementById('todyPoliceStatusPieAllYuJingBox'));
                this.echartsTodyPoliceStatusPieAllYuJingChart.setOption(echartsSimpePieFactory('#ED9913', this.dataTodyPoliceStatus.warningNum - this.dataTodyPoliceStatus.todoWarningNum));
            },
        },mounted(){
            this.getTodyPoliceStatus();
            this.intervalArray.push(setInterval(this.getTodyPoliceStatus,1000*60*15))
        },beforeDestroy(){
            clearIntervalArray(this.intervalArray)
        }
    }
</script>

<style scoped>

    .policeSituationBox {
        background-image: url("../../assets/img/emergencyDuty/bgPoliceSituation.png");
        height: 291px;
        position: relative;
        padding: 50px 20px 20px 20px;
    }

    #todyPoliceStatusPieAllJingQingBox, #todyPoliceStatusPieAllYuJingBox {
        width: 130px;
        height: 130px;
        /*background-color: white;*/
        /*height: 70px;*/
        /*width: 70px;*/
        margin: 0 auto;
    }
</style>
